
<template>
  <el-tooltip class="item" effect="dark" placement="right" @mouseenter.native="xhrDetail" @mouseout.native="clearTimer">
    <a target="_blank" :href="userId | filterHref('/account/account-detail?id=')">{{ userId }}</a>
    <div v-if="loading" slot="content">加载中</div>
    <div v-else slot="content">
      <span>用户id： {{ data.id }}<br>昵称：{{ data.nickname }}<br>性别：{{ data.gender | gender }}<br></span>
      <span>VIP详情：{{ '-' }}</span><br>
      <span>家族ID：{{ data.familyId }}</span><br>
      <span>家族昵称：{{ data.familyName }}</span><br>
      <span>位置信息：{{ local }}</span><br>
      <div v-if="data.gender === 1" class="boy">
        <span>土豪等级/充值金额：{{ data.rLevel +"/"+ data.rDiamonds/100 }}<br></span>
        <span>钻石：{{ data.diamonds }}<br></span>
        <span>视频卡：{{ data.chatCards }}<br>语音卡：{{ data.chatVoiceCards }}<br>私聊券：{{ data.chatTicketsNum }}<br>注册时间：{{ data.createTime }}<br></span>
      </div>
      <div v-if="data.gender === 2" class="girl">
        <span>魅力等级/积分：{{ data.mLevel+"/"+ (data.coins / 100) }}<br>积分数量：{{ data.coins / 100 }}<br>提现金额：{{ data.withdrawalMoney/10000 }}<br>账号类型：{{ certificate(data.liveCertification, data.goddessCertification) }}<br></span>
      </div>
      <span>账号状态：
        <template v-if="data.banedStatus">
          <font style="color:red">已封号</font>
        </template>
        <template v-else>
          正常
        </template>
        <br></span>
    </div>
  </el-tooltip>
</template>

<script>
import { xhrAccountList, xhrGetAddress } from '@/api/account';
export default {
  name: 'BackToTop',
  props: {
    userId: {
      type: [Number,String],
      required: true
    }
  },
  data() {
    return {
      loading: true,
      timer: null,
      data: {},
      local: ''
    }
  },
  watch: {
    'userId': function(now, old) {
      this.local = ''
      // this.getLocal(null)
    }
  },
  created() {
    // this.getLocal(null)
  },
  methods: {
    xhrDetail() {
      this.loading = true
      if (this.userId > 0) {
        this.timer = setTimeout(() => {
          xhrAccountList({
            userId: this.userId
          })
            .then((resp) => {
              this.loading = false
              this.data = resp.data.list[resp.data.list.length - 1];
              const d = resp.data.list[resp.data.list.length - 1];
              this.getLocal(d.ipAddress)
            })
            .catch((err) => {
              // this.$message.error(err);
              console.log(err)
            });
        }, 500)
      }
    },
    getLocal: function(ipAddress) {
      if (this.userId > 0) {
        const data = {
          resource_id: 5809,
          userId: this.userId
        }
        if (ipAddress) {
          data['query'] = ipAddress;
        }
        xhrGetAddress(data)
          .then((resp) => {
            this.loading = false
            this.local = resp.data.data.local
            if (resp.data.data.local == null) {
              this.xhrDetail()
            }
          })
          .catch((err) => {
            console.log(err)
          });
      }
    },
    certificate(live, goddess) {
      if (live == null && goddess == null) {
        return '未认证'
      }
      if (live === true && goddess === false) {
        return '真人认证'
      } else if (goddess === true) {
        return '女神认证'
      } else {
        return '未认证'
      }
    },
    clearTimer() {
      clearTimeout(this.timer)
    }
  }
}
</script>
